<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>

    <div id='app'>
        <button @click="del">删除</button>
        <button @click="add">新增</button>
        <button @click="put">修改</button>
        <li v-for="item in list" :key="item.id">{{item.name}}</li>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        // 安装json-server  npm i json-server -g
        // 创建.json文件
        // json-server --watch db.json  就可以访问

        const vm = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
                // 删除id为1的数据
                del() {
                    axios.delete('http://localhost:3000/fruits/1')
                        .then(res => {
                            console.log(res.data); // 响应结果是一个空对象,表示删除成功
                        })
                },
                // 添加数据  发送post请求的时候,需要携带参数, name
                add() {
                    axios.post('http://localhost:3000/fruits', {
                            name: "苹果"
                        })
                        .then(res => {
                            console.log(res);
                        })
                },
                // put更改数据  将id为4的水果名称修改为 猕猴桃
                put() {
                    axios.put('http://localhost:3000/fruits/4', {
                            name: "猕猴桃"
                        })
                        .then(res => {
                            console.log(res);
                        })
                }
            },
            created() {
                // 获取所有数据
                // axios.get('http://localhost:3000/fruits')
                //     .then(res => {
                //         console.log(res.data);
                //         this.list = res.data
                //     })

                // 根据id 获取数据 get请求需要携带额外参数的时候  需要使用params字段携带
                axios.get('http://localhost:3000/fruits/1', {
                        params: {
                            pagenum: 1
                        }
                    })
                    .then(res => {
                        console.log(res.data);
                        this.list = res.data
                    })
            }
        })
    </script>
</body>

</html>